<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col text-right">
        <a-button @click="add()" type="primary">添加角色</a-button>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <el-table :data="getschoolrole" style="width: 100%; border: 1px solid #eeeeee">
          <el-table-column prop="ID" label="序号" width="60"><template slot-scope="scope">{{scope.$index+1}}</template>></el-table-column>
          <el-table-column prop="name" label="角色"></el-table-column>
          <el-table-column align="right" prop="detailedaddress" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="add(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.ID)">删除</el-button>
              <el-button size="mini" type="primary">
                <router-link
                  class="text-white"
                  :to="{name: '查看角色', params: { ID: scope.row.ID }}"
                >分配权限</router-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asynccreatschoolrole,
  asyncdelschoolrole
} from "../../../../plugins/api.js";
export default {
  name: "role",
  data() {
    return {
      data: [],
      columns: []
    };
  },
  computed: mapGetters(["getschoolrole"]),
  methods: {
    add(v) {
      const isvalue = v => {
        v = v ? v : "";
        if (v.length < 2 || v.length > 10) {
          return false
        }
      };
      let title;
      let name;
      if (v) {
        title = "修改";
        name = v.name;
      } else {
        title = "添加";
      }
      this.$prompt("请输入角色名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: isvalue,
        inputErrorMessage: "长度在1-10个字符",
        inputPlaceholder: name
      })
        .then(async ({ value }) => {
          try {
            if (v) {
              await asynccreatschoolrole({ name: value, ID: v.ID });
            } else {
              await asynccreatschoolrole({ name: value });
            }
            this.$store.dispatch("actionschoolrole");
            this.$message({
              type: "success",
              message: `${title}成功`
            });
          } catch (err) {
            this.$message({
              type: "error",
              message: `${title}失败:${err}`
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    del(ID) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdelschoolrole({ ID });
            await this.$store.dispatch("actionschoolrole");
            this.$message.success("删除成功");
          } catch (err) {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
</style>